<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>K_ImageOverlay _ K_ReverterMap _ Google Maps API</title>
    <style type="text/css">
    v\:* {
      behavior:url(#default#VML);
    }
    </style>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA7nPTPXCvzWYxyKdmbFQfTxRfh1ef-GeSz5gtCVpCKOPebNr1YhR23M_jRfeqAugNMsW3pZQJAwfCFw" type="text/javascript"></script>
    <script src="../../../src/gmap2/K_ImageOverlay.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map,imageOverlay;
function onLoad()
{
	map = new GMap2(document.getElementById("map"));
	map.setCenter(new GLatLng(19.18148958198376,110.093994140625),8);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	var bounds=new GLatLngBounds(new GLatLng(18.0400740574296,108.548384827952),new GLatLng(20.3537745028853,111.729042228649));
	imageOverlay=new K_ImageOverlay("http://www.gogocn.com/admin/map/map_hainan.jpg",bounds,0,0.5);
	map.addOverlay(imageOverlay);
}
function ChangeOpacity(o)
{
	opacity=imageOverlay.opacity+o;
	if(opacity>1)opacity=1;
	if(opacity<0)opacity=0;
	imageOverlay.setOpacity(opacity);
}
//]]>
</script>
  </head>
  <body onload="onLoad()">
    <div>Change Image Opacity:  <input type="button" value="+" onclick="ChangeOpacity(0.2)"/> <input type="button" value="-" onclick="ChangeOpacity(-0.2)"/></div>
    <div><a href="total.html#K_ImageOverlay">Return to article(Chinese)</a></div>
    <div id="map" style="width: 750px; height: 550px"></div>
  </body>
</html>
